<template>
  <div class="my">
    <!-- 头部 -->
    <div class="my-header">
      <van-icon name="user-circle-o" color="#fff" size="3rem" />
      <div class="login" v-if="!userData.name">
        <span @click="gologin()">登录</span>/
        <span @click="goregister()">注册</span>
      </div>
      <div class="login" v-else>
        <span>用户名:{{userData.name}}</span>
        <span class="login_span" @click="goLogin()">退出登入</span>
      </div>
    </div>
    <div class="my-content">
      <van-cell-group class="mygroup">
        <van-cell title="我的订单" is-link value="全部订单" />
      </van-cell-group>
      <van-cell-group class="mygroup1">
        <div class="mygroup1-con">
          <div class="mygroup1-con-nav">
            <i class="iconfont icon-daifukuan active"></i>
            <p>待付款</p>
          </div>
          <div>
            <i class="iconfont icon-daifahuo"></i>
            <p>待发货</p>
          </div>
          <div>
            <i class="iconfont icon-tuihuanxiu"></i>
            <p>退换修</p>
          </div>
        </div>
      </van-cell-group>
      <van-cell-group class="mygroup2" title=" ">
        <i class="iconfont icon-huiyuan about"></i>
        <van-cell title="会员中心" is-link />
      </van-cell-group>

      <!-- 第二组 -->
      <van-cell-group class="mygroup2">
        <i class="iconfont icon-youhuiquan2"></i>
        <van-cell title="我的优惠" is-link />
      </van-cell-group>
      <van-cell-group class="mygroup2" title=" ">
        <i class="iconfont icon-fuwuzhongxin1"></i>
        <van-cell title="服务中心" is-link />
      </van-cell-group>
      <van-cell-group class="mygroup2">
        <i class="iconfont icon-shangjia1"></i>
        <van-cell title="小米之家" is-link />
      </van-cell-group>
      <!-- 第三组 -->
      <van-cell-group class="mygroup2" title=" ">
        <i class="iconfont icon-Fmatongdao about"></i>
        <van-cell title="我的F码" is-link />
      </van-cell-group>
      <van-cell-group class="mygroup2">
        <i class="iconfont icon-libao about"></i>
        <van-cell title="礼包码兑换" is-link />
      </van-cell-group>

      <!-- 设置 -->
      <van-cell-group class="mygroup6 mygroup2" title=" ">
        <i class="iconfont icon-shezhi"></i>
        <van-cell title="设置" is-link />
      </van-cell-group>
    </div>
    <div class="my-footer"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userData: {}
    }
  },
  created() {
    this.userData = JSON.parse(sessionStorage.userinfo)
  },
  methods: {
    gologin() {
      this.$router.push('/login/')
    },
    goregister() {
      this.$router.push('/register/')
    },
    goLogin() {
      sessionStorage.removeItem('userinfo')
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" scoped>
.my-header {
  background-color: orange;
  padding-top: 2rem;
  color: #fff;
  height: 3rem;
  line-height: 3rem;
  .van-icon {
    line-height: 0.3125rem;
    padding-left: 15px;
    float: left;
  }
  .login {
    float: left;
    line-height: 0.3125rem;
    padding: 0 10px;
  }
  .login_span{
    margin-left: 20px;
    text-decoration: underline;
    color: red;
  }
}
.my-content {
  background-color: rgb(251, 246, 246);
  padding-bottom: 1rem;
  .about {
    color: orange;
  }
  .active {
    color: blue;
  }
  .mygroup1 {
    height: 4.5rem;
    .mygroup1-con {
      display: flex;
      height: 2.5rem;
      padding-top: 10px;
      justify-content: space-around;
      margin: 0 auto;
    }
    p {
      font-size: 0.75rem;
      opacity: 0.5;
      margin-left: --0.0083rem;
    }
    i {
      width: 30%;
      font-size: 1.5rem;
      opacity: 0.5;
    }
  }
  .mygroup2 {
    display: flex;
    height: 2.5rem;
    line-height: 2.5rem;
    .icon-youhuiquan2 {
      color: rgb(18, 175, 237);
    }
    .icon-fuwuzhongxin1 {
      color: rgb(228, 59, 59);
    }
    .icon-shangjia1 {
      color: rgb(221, 124, 14);
    }
    i {
      font-size: 1.5rem;
      padding-left: 1rem;
    }
  }
}
.my-footer {
  height: 5rem;
}
</style>
